<template>
    <div class="fold">
        <div class="title" @click="active = !active">
            <img src="@/assets/image/common/缩放.png" v-show="active == false">
            <img src="@/assets/image/common/展开.png" v-show="active">

            <span style="padding-left:10px;">{{title}}</span>
        </div>
        <div class="content" v-show="active">
            <slot></slot>
        </div>
        
    </div>
</template>

<script>
export default {
    props:['title'],
    data(){
        return{
            active: false,
        }
    }
}
</script>

<style scoped>
    .fold{
        cursor:default;
    }

    .fold .title{
        color:white;
        font-size: 18px;

        padding:8px;
        background-color: rgb(56, 56, 56);

        display:flex;
        align-items: center;
    }

    .fold .title img{
        width: 15px;
        height: 15px;
    }

    .fold .content{
        width:90%;
        padding-left: 5%;

        margin-top:20px;
    }

    .fold span{
        color:white;
    }
</style>